<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>CMUBiS</title>
		<link type="text/css" href="css/cmubis/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
		<link href="css/dcverticalmegamenu.css" rel="stylesheet" type="text/css" />
		<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
		<script type='text/javascript' src='js/jquery.dcverticalmegamenu.1.1.js'></script>
		<script type='text/javascript' src='js/login.js'></script>
		<script type='text/javascript' src='js/onload.js'></script>
		
		  <script>
		  function showRegister(){
		      $("#register_modal").dialog({modal: true});
		      return false;
		  }
			function showLogin(){
			      $("#login_modal").dialog({modal: true});
			      return false;
			  }
			  </script>


		<script type="text/javascript">
			$(function(){

				// Accordion
				$("#accordion2").accordion({ header: "h3" });	
				// Tabs
				$('#tabs').tabs();
	

				// Dialog			
				$('#dialog').dialog({
					autoOpen: false,
					width: 600,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}, 
						"Cancel": function() { 
							$(this).dialog("close"); 
						} 
					}
				});
				
				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				});

				// Datepicker
				$('#datepicker').datepicker({
					inline: true
				});
				
				// Slider
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});
				
				// Progressbar
				$("#progressbar").progressbar({
					value: 20 
				});
				
				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
			});
			$(document).ready(function(){

    			 $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  
  
    $("ul.topnav li span").click(function() { //When trigger is clicked...  
  
        //Following events are applied to the subnav itself (moving subnav up and down)  
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
  
        $(this).parent().hover(function() {  
        }, function(){  
            $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
        });  
  
        //Following events are applied to the trigger (Hover events for the trigger)  
        }).hover(function() {  
            $(this).addClass("subhover"); //On hover over, add class "subhover"  
        }, function(){  //On Hover Out  
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
    });  
    $('#mega').dcVerticalMegaMenu({

		rowItems: '3',

		speed: 'fast',

		effect: 'show',

		direction: 'right'

	});
    
  
				});
</script>

	</head>
	<body>
	
	<div id="header">

	<div style="font-size: 1em;top:0;left: 0; padding-left: 5px;padding-top: 5px;position:absolute;">
			<span style="font-weight: bold;">CMUBiS</span>|<a href="/CMU/index-html5.html">Home</a>|<a href="" onClick="return showLogin()">Sign in</a>|<a href="#" onClick="return showRegister()">Register</a>
	</div>
	<div style="font-size: 1em;top:0;right: 0; padding-right: 5px;padding-top: 5px;position:absolute;">
			<a href="#">Buy</a>|<a href="#">Sell</a>|<a href="#">My Account</a>|<a href="#">Help</a>
	</div>

	<div style="left: 0; top: 20px;padding-left: 5px;padding-top: 5px;position:absolute;">
			
			<form action="search" method="get" style="font-size: 1.3em">
			Search
			<input name="searchTerms"/>
			<select name="category">
  				<option value="1" selected="selected">All Categories</option>
  				<option value="2">Art</option>
  				<option value="3">Books</option>
  				<option value="4">Cars</option>
  			</select>
  			<input type="submit" value="Search" />
  			<a href="#">Advanced</a>
  		</form>
	</div>
	</div>
	<div id="container" style="position:relative">
	<div id="sidebar" style="left: 0; top: 50px;padding-left: 0px;padding-top: 5px;width:100;position:absolute;">
	<ul id="mega" class="mega-menu">

<li><a href="#">Menu A</a>

<ul>

<li><a href="#">Sub-Header 1</a>

<ul><li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

</ul></li>

<li><a href="#">Sub-Header 2</a>

<ul><li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

</ul></li>

<li><a href="#">Sub-Header 3</a>

<ul><li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

</ul></li>

<li><a href="#">Sub-Header 4</a>

<ul><li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li></ul></li>

<li><a href="#">Sub-Header 5</a>

<ul><li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li></ul></li>

<li><a href="#">Sub-Header 6</a>

<ul><li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li></ul></li></ul></li>

<li><a href="#">Menu B</a>

<ul>

<li><a href="#">Sub-Header 1</a>

<ul><li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

</ul></li>

<li><a href="#">Sub-Header 2</a>

<ul><li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

</ul></li>

<li><a href="#">Sub-Header 3</a>

<ul><li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

<li><a href="#">Menu Link</a></li>

</ul></li>

</ul></li>
</ul>
		
	</div>
	<div id="main" style="left: 125px; top:50px;padding-left: 0px;padding-right:5px;padding-top: 5px;position:absolute;">
	<!-- Accordion -->
		<h2 class="demoHeaders">Accordion</h2>
		<div id="accordion2">
			<div>
				<h3><a href="#">First</a></h3>
				<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
			</div>
			<div>
				<h3><a href="#">Second</a></h3>
				<div>Phasellus mattis tincidunt nibh.</div>
			</div>
			<div>
				<h3><a href="#">Third</a></h3>
				<div>Nam dui erat, auctor a, dignissim quis.</div>
			</div>
		</div>
	
		<!-- Tabs -->
		<h2 class="demoHeaders">Tabs</h2>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">First</a></li>
				<li><a href="#tabs-2">Second</a></li>
				<li><a href="#tabs-3">Third</a></li>
			</ul>
			<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
			<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
			<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
		</div>

	<div id="login_modal" style="display:none" title="Login">
		<form onsubmit="checkLogin()">
			<div data-role="fieldcontain">
   				<label for="loginusername">Username:</label>
   				<input type="text" name="loginusername" id="loginusername" value="" />
			</div>
			<div data-role="fieldcontain">
   				<label for="password">Password:</label>
   				<input type="password" name="loginpassword" id="loginpassword" value="" />
			</div>
			<button type="submit" name="submit" value="submit-value">Submit</button>
		</form>
	</div>
	
	<div id="register_modal" style="display:none" title="Register">
		<form action="/CMU/registeruser" method="get" onSubmit="">
			<div data-role="fieldcontain">
   				<label for="registerfirstName">First Name:</label>
   				<input type="text" name="registerfirstName" id=username value="" />
			</div>
			<div data-role="fieldcontain">
   				<label for="registerlastName">Last Name:</label>
   				<input type="text" name="registerlastName" id=username value="" />
			</div>
			<div data-role="fieldcontain">
   				<label for="registerusername">Username:</label>
   				<input type="text" name="registerusername" id=username value="" />
			</div>
			<div data-role="fieldcontain">
   				<label for="registerpassword">Password:</label>
   				<input type="password" name="registerpassword" id="password" value="" />
			</div>
			<div data-role="fieldcontain">
   				<label for="registerpassword2">Re-enter Password:</label>
   				<input type="password" name="registerpassword2" id="password2" value="" />
			</div>
			<div data-role="fieldcontain">
   				<label for="registeremail">Email Address:</label>
   				<input type="email" name="registeremail" id=username value="" />
			</div>
			<button type="submit" name="submit" value="submit-value">Submit</button>
		</form>
	</div>
	
	
	</div>
	
	
	</div>
	<div id="footer" style="position:absolute;bottom:0px;padding-bottom:5px;">
	Footer Stuff
	</div>
	
	</body>
</html>


